<template>
    <div>
<!--//弹出框-->
      <el-dialog
        title="添加用户角色"
        :visible.sync="dialogVisible"
        width="45%">

<!--表格-->
        <el-form ref="form" :visible.sync="dialogVisible" :model="form" label-width="80px">

            <el-form-item label="菜单名称" prop="menuName"  >
                <el-input v-model="form.menuName" auto-complete="off" ></el-input>
            </el-form-item>
            <el-form-item prop="parentId" label="父菜单">
            <el-select
              v-model="form.parentId"
              collapse-tags
              style="width: 340px;"
              placeholder="请选择">
              <el-option
                v-for="item in parentmenu"
                :key="item.menuId"
                :label="item.menuName"
                :value="item.menuId">
              </el-option>
            </el-select>
          </el-form-item>
            
            <el-form-item label="url" prop="url" >
                <el-input v-model="form.url" auto-complete="off"></el-input>
            </el-form-item>

          <el-form-item label="帐号状态" prop="visible" >
                       <el-radio-group v-model="form.visible"> 
                            <el-radio v-model="form.visible" label="0">正常</el-radio>
                            <el-radio v-model="form.visible" label="1">隐藏</el-radio>
                        </el-radio-group>                  
         </el-form-item>
          <el-form-item label="备注" prop="remark"  >
                <el-input v-model="form.remark" auto-complete="off"></el-input>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">

          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="tianjia">确 定</el-button>
        </span>
      </el-dialog>
    <el-row>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="父菜单ID">
                <el-input v-model="formInline.parentId" placeholder="父菜单ID"></el-input>
            </el-form-item>
            <el-form-item label="菜单名称">
                <el-input v-model="formInline.menuName" placeholder="菜单名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="clearc">清除</el-button>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="handleAdd">添加</el-button>
            </el-form-item>
            </el-form>
            
    </el-row>
    <el-row>
        <el-table
        :data="tableData"
        style="width: 100%">
         <el-table-column
            prop="menuId"
            label="菜单ID"
            width="180">
        </el-table-column>
         <el-table-column
            prop="menuName"
            label="菜单名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="parentId"
            label="父菜单ID"
            width="180">
        </el-table-column>
         <el-table-column
            prop="url"
            label="url"
            width="180">
        </el-table-column>
        <el-table-column
          prop="visible"
          label="状态">
          <template slot-scope="scope">
            <p  v-if="tableData[scope.$index].visible==0">正常</p>
            <p  v-if="tableData[scope.$index].visible==1">禁用</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注">
        </el-table-column>
        <el-table-column label="操作" width="270">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                 <el-button
                     size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
         </el-table-column>
        </el-table>
     </el-row>
     <el-row>
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2,3,5,10,20,100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
     </el-row>
    </div>
</template>
<script>
export default {
     data() {
        return {
          tableData: [],
          currentPage:1,
          role: [],
          total:100,
          formInline: {parentId:'',menuName:''},
          pageSize:5,
          dialogVisible:false,
          form: {
            menuName:'',
            parentId:'',
            visible:'',
            remark:'',
            url:'',
          },
          parentmenu:[],
        }
      },
      // 初始化数据  mounted()
      created:function(){
              this.loadData();
              this.queryParent();
      },
        methods: {
                //封装数据请求
                loadData(){
                    var _this=this;
                    this.$http.post("/ss/menu/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize+"&parentId="+this.formInline.parentId+"&menuName="+this.formInline.menuName+"&menuId="+this.formInline.parentId).then((response) => {
                    //alert(JSON.stringify(response.data.t))
                    _this.tableData=response.data.t.list;
                    _this.total=response.data.t.total;
               })
                },
                
                 //处理编辑
                handleEdit(index, row) {
                    this.form=JSON.parse(JSON.stringify(row))
                    //alert(JSON.stringify(this.form))
                    this.dialogVisible=true;
                },
                //处理删除
                handleDelete(index, row) {
                    console.log(index, row);
                },
                //分页 每页数量变化时处理
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
                },
                 //分页 第几页变化时处理
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage=val;
                    this.loadData();
                },
                //点击查询方法
                 onSubmit() {
                    console.log('submit!');
                     this.loadData();
                },
                //清楚查询条件
                clearc(){
                        this.formInline.menuName='';
                        this.formInline.parentId='';
                        this.loadData();
                },
                  //点击新增的按钮 让他显示淡出狂并且form清空
                  handleAdd() {
                    this.dialogVisible=true;
                    this.form={};
                  },
                  //添加方法
                tianjia(){
                    var _this = this;
                         //alert(JSON.stringify(this.form))
                        this.$http.post("/ss/menu/insert",this.form).then((response) => {
                        alert(JSON.stringify(response.data.t))
                        if(response.data.t!=null){
                            this.dialogVisible=false;
                            this.loadData();
                            }
                        })
                },
                //查询父菜单
                queryParent(){
                  var _this=this;
                    this.$http.post("/ss/menu/queryParent").then((response)=> {
                    //alert(JSON.stringify(response.data.t))
                    _this.parentmenu=response.data.t;
                  })
                },
        }
}
</script>
<style>

</style>